<!--
 * @Description:
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-08-23 19:27:20
 * @LastEditTime: 2021-08-26 16:54:29
 * @FilePath: \cscec-pms-admin\src\views\design\deepDesign\outcomeMeeting\add.vue
-->
<template>
  <base-breadcrumb
    class="flexMemberInfo-container"
    title="新增深化设计成果交底会"
  >
    <MeetingAdd
      ref="meetingAdd"
      :form="form"
      :form-option="formOption"
      :rules="rules"
      :meeting-type="'5'"
      @selectOrg="selectOrg"
    >
      <template slot="speakerId">
        <SelectPersonByProject
          :id="form.branchComId"
          v-model="form.speakerId"
          :project-id="form.projectId"
          :show-search="true"
          mode="combobox"
          placeholder="请选择"
          option-label-prop="children"
        />
      </template>
      <template slot="deepenResultsText">
        <div class="meeting-add-btn">
          <BaseInput
            ref="deepenResultsText"
            v-model="form.deepenResultsText"
            placeholder="请选择"
            onfocus="this.blur();"
            @click="designResultsVisible = true"
          />
          <a-button
            type="primary"
            @click="designResultsVisible = true"
          >
            选择
          </a-button>
        </div>
      </template>
    </MeetingAdd>
    <!-- 表单 -->
    <!-- 选择深化设计成果模态框 -->
    <DesignResultsSelect
      :visible.sync="designResultsVisible"
      :need-tree="false"
      :is-mutilple="true"
      :persons="form.deepenResultsList"
      @confirms="addResult"
    />
    <!-- 选择深化设计成果模态框 -->
  </base-breadcrumb>
</template>
<script>
// import { columnsEmployee } from './model.js'
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectProject from '@/components/Select/SelectProject'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
// import dialogEdit from '@/views/conference/standardConference/conferenceList/dialogEdit.vue'
import DesignResultsSelect from './components/DesignResultsSelect'
import MeetingAdd from '@/components/Meeting/MeetingAdd'
export default {
  name: 'OutcomeMeetingAdd',
  components: {
    MeetingAdd,
    // dialogEdit,
    SelectPersonByProject,
    DesignResultsSelect
  },
  data() {
    return {
      // 表单
      form: {
        meetingTypeName: '深化成果交底会议',
        employeeList: [],
        deepenResultsList: []
      },
      // 设计成果弹窗显示隐藏
      designResultsVisible: false
    }
  },
  computed: {
    // 表单配置
    formOption() {
      return [
        {
          label: '会议类型',
          keyName: 'meetingTypeName',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '所属单位',
          type: 'orgTree',
          keyName: 'projectId',
          rules: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
          span: 16,
          isAutoSelectFirst: true,
          isNeedAuth:true,
          checkStrictly: true,
          isQueryProjecDetail: false
        },
        // {
        //   label: '所属分公司',
        //   keyName: 'branchComId',
        //   type: SelectSubCompany,
        //   attrs: {
        //     //表单项关联
        //     autoSelected: true
        //   },
        //   rules: [{ required: true, message: '请选择', trigger: 'change' }]
        // },
        // {
        //   label: '所属项目',
        //   keyName: 'projectId',
        //   type: SelectProject,
        //   attrs: {
        //     //表单项关联
        //     autoSelected: true,
        //     keyValue: 'branchComId',
        //     isEdit: true,
        //     form: this.form
        //   },
        //   rules: [{ required: true, message: '请选择', trigger: 'change' }]
        // },
        {
          label: '会议名称',
          keyName: 'meetingName',
          type: 'BaseInput',
          rules: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        {
          label: '主持人/主讲人',
          keyName: 'speakerId',
          slot: true,
          rules: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        {
          label: '会议地点',
          keyName: 'meetingPlace',
          type: 'BaseInput',
          rules: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        {
          label: '会议时间',
          keyName: 'meetingTime',
          type: 'a-date-picker',
          attrs: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm'
          },
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          label: '会议说明',
          keyName: 'meetingExplain',
          type: 'BaseTextarea',
          attrs: {
            maxLength: 1000
          },
          rules: [{ required: true, message: '请输入', trigger: 'change' }],
          span: 24
        },
        {
          label: '深化设计成果',
          keyName: 'deepenResultsText',
          slot: true,
          // rules: [{ required: true, message: '请选择', trigger: 'change' }]
        }
      ]
    },
    // 校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  methods: {
    selectOrg(val) {
      this.form.branchComId = val[val.length - 2].orgId
    },
    /**
     * @description: 添加深化设计成果
     * @param {array} list 成果列表
     * @return {void}
     */
    addResult(list) {
      this.form.deepenResultsText = this.form.deepenResultsList.map((el) => el.resultsName).join(',')
      this.form.deepenResultsList = list
      if (list.length > 0) {
        this.$refs.meetingAdd.$refs.form.clearValidate(['deepenResultsText'])
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.meeting-add-btn {
  display: flex;
  align-items: center;
  .BaseInput-container {
    flex: 1;
    margin-right: 10px;
  }
  .ant-btn {
    height: 28px;
  }
}
</style>
